<template>
  <div>
    <el-tabs v-model="active">
      <el-tab-pane label="组件属性" name="first">
        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字段标识
            </div>
          </el-col>
          <el-col :span="18">
            <select-model :model.sync="store.current.model"></select-model>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              字段标题
            </div>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="store.current.options.label"
              placeholder="label"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              文本框属性
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              提示文字
            </div>
          </el-col>
          <el-col :span="18">
            <el-input
              clearable
              v-model="store.current.options.placeholder"
              placeholder="提示文字"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              默认值
            </div>
          </el-col>
          <el-col :span="18">
            <el-input
              clearable
              v-model="store.current.options.defaultValue"
              placeholder="输入默认值"
            ></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <div class="prop-set-title">
              开始时间
            </div>
          </el-col>
          <el-col :span="18">
            <el-time-select
              @change='selectableRangeChange'
              style="width: 100%;"
              placeholder="起始时间"
              :clearable='false'
              v-model="startTime"
              :picker-options="{
                start: '00:00',
                step: '00:15',
                end: '23:59',
              }"
            >
            </el-time-select>
          </el-col>
        </el-row>
        <el-row
          ><el-col :span="6">
            <div class="prop-set-title">
              结束时间
            </div>
          </el-col>
          <el-col :span="18">
            <el-time-select
              @change='selectableRangeChange'
              style="width: 100%;"
              placeholder="结束时间"
              :clearable='false'
              v-model="endTime"
              :picker-options="{
                start: '00:00',
                step: '00:15',
                end: '23:59',
                minTime: startTime,
              }"
            >
            </el-time-select>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              操作属性
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              <el-switch
                active-text="清空"
                v-model="store.current.options.clearable"
              ></el-switch>
              <el-switch
                active-text="禁用"
                v-model="store.current.options.disabled"
              ></el-switch>
              <el-switch
                active-text="只读"
                v-model="store.current.options.readonly"
              ></el-switch>
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              显示类型
            </div>
          </el-col>
          <el-col :span="18">
            <el-select
              v-model="store.current.options.format"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dateTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              格式
            </div>
          </el-col>
          <el-col :span="18">
            <el-select
              @change="showTypechange"
              v-model="store.current.options.showType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dateTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              数据校验
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              <el-select
                clearable
                @change="regularCheckChange"
                v-model="store.current.options.regularCheck"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in regularChecks"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="8">
            <div class="prop-set-title">添加校验</div>
          </el-col>
          <el-col :span="4">
            <el-button
              @click="addCheckRule"
              type="primary"
              icon="el-icon-edit"
              circle
            ></el-button>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <div class="prop-set-title">
              使用表单数据源
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-select
              v-model="store.current.options.sourceCode"
              @change="sourceChange"
              clearable
              placeholder="请选择数据源名称"
            >
              <el-option
                v-for="source in sourceList"
                :key="source.code"
                :label="source.name"
                :value="source.code"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <div class="prop-set-title">
              数据源字段绑定
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-select
              v-model="store.current.options.sourceBingfield"
              @change="fieldChange"
              clearable
              placeholder="请选择数据源名称"
            >
              <el-option
                v-for="field in sourcefieldList"
                :key="field.code"
                :label="field.name"
                :value="field.code"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="表单属性" name="second">
        <form-config :store="store"></form-config>
      </el-tab-pane>
    </el-tabs>

   <selfCheck ref="selfCheck" :rules="store.current.rules"></selfCheck>

  </div>
</template>

<script>
import selfCheck from "@/low-code/components/self-check/"
import {
  regularCheck,
  ruleCheckOringin,
} from "@/low-code/utils/enumeration.js";
 import formConfig from "@/low-code/setting/form-config/index.vue"
import clone from "clone";
export default {
  inject: ["getStore"],
  components: { formConfig,selfCheck },
  data() {
    return {
      active: "first",
      startTime: "06:30",
      endTime: "18:30",
      dateTypes: [
        {
          value: "HH",
          label: "HH",
        },
        {
          value: "HH:mm",
          label: "HH:mm",
        },
        {
          value: "HH:mm:ss",
          label: "HH:mm:ss",
        },
      ],
      regularChecks: [
        {
          value: regularCheck.VALUE,
          label: "必填",
        },
        {
          value: regularCheck.STRING,
          label: "字符串",
        },
        {
          value: regularCheck.EMAIL,
          label: "邮箱",
        },
        {
          value: regularCheck.PHONE,
          label: "手机号码",
        },
        {
          value: regularCheck.CARD,
          label: "身份证",
        },
        {
          value: regularCheck.POSTAL,
          label: "邮政编码",
        },
        {
          value: regularCheck.QQ,
          label: "QQ号",
        },
        {
          value: regularCheck.IP,
          label: "IP",
        },
        {
          value: regularCheck.ENGLISH,
          label: "英文",
        },
        {
          value: regularCheck.CHINESE,
          label: "中文",
        },
      ],
    };
  },
  watch: {
    "store.current.options": {
      handler() {
        //特别注意，不能用箭头函数，箭头函数，this指向全局
        this.$handleStack.push(clone(this.store.root));
      },
      // immediate: true,  //刷新加载 立马触发一次handler
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
  },
  methods: {
    selectableRangeChange(){
      console.log(this.startTime);
      console.log(this.endTime);
      this.store.current.options.selectableRange.selectableRange=this.startTime+':00 - '+this.endTime+':00'
      console.log(this.store.current.options.selectableRange);
    },
    showTypechange() {
      this.store.current.options.defaultValue = "";
    },
    regularCheckChange(type) {
      let index = this.store.current.rules.findIndex((item) => {
        return item.ruleType == ruleCheckOringin.SELECT;
      });
      if (index != -1) {
        this.store.current.rules.splice(index, 1);
      }
      if (type) {
        this.store.current.rules.push({
          validator: null,
          validatorType: type,
          trigger: "blur",
          ruleType: ruleCheckOringin.SELECT,
        });
      }
    },
    addCheckRule() {
      this.$refs["selfCheck"].dialogVisible=true
    },
    sourceChange() {
      this.store.current.options.defaultValue = "";
    },
    fieldChange() {
      this.store.meiTuan.initWarehouse();
    },
  },
  computed: {
    store() {
      return this.getStore();
    },
    sourceList() {
      return Object.values(this.store.formDataSource.sourceMap || {});
    },
    sourcefieldList() {
      if (
        this.store.formDataSource.sourceMap &&
        this.store.current.options.sourceCode
      ) {
        return this.store.formDataSource.sourceMap[
          this.store.current.options.sourceCode
        ]["fields"];
      } else {
        return [];
      }
    },
  },
};
</script>

<style scoped>
::v-deep .el-tabs__item[aria-controls] {
  width: 50% !important;
  text-align: center;
}
::v-deep .el-button.is-circle {
  padding: 5px;
}
</style>
